<!--<template>-->
<!--  <div>-->
<!--    &lt;!&ndash;    返回导航栏&ndash;&gt;-->
<!--    <van-nav-bar-->
<!--      :title="storeName"-->
<!--      left-text="返回"-->
<!--      left-arrow-->
<!--      @click-left="onClickLeft"-->
<!--    />-->

<!--    &lt;!&ndash;    顶部tab&ndash;&gt;-->
<!--    <van-tabs v-model:active="tab_active">-->
<!--      <van-tab title="点菜">-->


<!--        <van-row>-->
<!--          <van-col span="4">-->
<!--            &lt;!&ndash;    侧边栏&ndash;&gt;-->
<!--            <van-sidebar v-model="sidebar_active">-->
<!--              <van-sidebar-item title="全部"/>-->
<!--              <van-sidebar-item title="饮品"/>-->
<!--              <van-sidebar-item title="进店必买"/>-->
<!--            </van-sidebar>-->
<!--          </van-col>-->
<!--          <van-col span="20">-->

<!--            &lt;!&ndash;      菜品&ndash;&gt;-->
<!--            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">-->
<!--              <van-list-->
<!--                v-model:loading="loading"-->
<!--                :finished="finished"-->
<!--                finished-text="没有更多了"-->
<!--                @load="onLoad"-->
<!--              >-->
<!--                <van-cell v-for="item in dishList">-->

<!--                  &lt;!&ndash;                  商品卡片&ndash;&gt;-->
<!--                  <van-card-->
<!--                    :price=item.price/100-->
<!--                    :desc=item.description-->
<!--                    :title=item.name-->
<!--                    thumb="https://yanxuan.nosdn.127.net/79b9d2e7a3c232b34972975cc1b6d644.png?quality=95&type=webp&imageView"-->
<!--                  >-->
<!--                    <template #tags>-->
<!--                      <van-tag plain type="danger">{{ item.categoryName }}</van-tag>-->
<!--                    </template>-->
<!--                    &lt;!&ndash;                    按钮&ndash;&gt;-->
<!--                    <template #footer>-->
<!--                      <van-button icon="plus" type="primary"-->
<!--                                  style="width: .1rem;height: .5rem;background-color: red;border: transparent"-->
<!--                                  @click="addCart(item)"/>-->
<!--                    </template>-->
<!--                  </van-card>-->
<!--                </van-cell>-->



<!--                &lt;!&ndash;                购物车pop&ndash;&gt;-->
<!--                <van-popup-->
<!--                  v-model:show="show"-->
<!--                  closeable-->
<!--                  close-icon-position="top-left"-->
<!--                  position="bottom"-->
<!--                  :style="{ height: '50%' }"-->
<!--                >-->
<!--                  &lt;!&ndash;                  购物车内容&ndash;&gt;-->
<!--                  <van-card-->
<!--                    v-for="cart in cartList"-->
<!--                    :price=cart.amount*cart.number/100.00-->
<!--                    :title=cart.name-->
<!--                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"-->
<!--                    style="padding-top: 1rem;height: 3rem"-->
<!--                  >-->
<!--                    <template #footer>-->
<!--                      &lt;!&ndash;                      进步器&ndash;&gt;-->
<!--                      <van-stepper v-model="cart.number" min="" @change="updateCart(cart)"/>-->
<!--                    </template>-->

<!--                  </van-card>-->
<!--                  <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit">-->
<!--                    &lt;!&ndash;                  购物车&ndash;&gt;-->
<!--                    <van-icon name="shopping-cart-o" size=".5rem"-->
<!--                              :badge="cartNum"-->
<!--                              color="#ee0a24"-->
<!--                              style="margin-right: 1rem;float: right"-->
<!--                              @click="showPopup"/>-->
<!--                  </van-submit-bar>-->
<!--                  &lt;!&ndash;                  留白&ndash;&gt;-->
<!--                  <div style="height: 1rem;"></div>-->
<!--                </van-popup>-->



<!--                &lt;!&ndash;                吸底&ndash;&gt;-->
<!--                <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit">-->
<!--                  <van-icon name="shopping-cart-o" size=".5rem"-->
<!--                            :badge="cartNum"-->
<!--                            color="#ee0a24"-->
<!--                            style="margin-right: 1rem"-->
<!--                            @click="showPopup"/>-->
<!--                </van-submit-bar>-->
<!--                &lt;!&ndash;                  购物车&ndash;&gt;-->
<!--              </van-list>-->
<!--            </van-pull-refresh>-->
<!--          </van-col>-->
<!--        </van-row>-->
<!--      </van-tab>-->
<!--      <van-tab title="评价">评价</van-tab>-->
<!--      <van-tab title="商家">商家</van-tab>-->

<!--    </van-tabs>-->


<!--  </div>-->
<!--</template>-->
<template>
  <div>
    <van-sticky>
      <van-nav-bar
        :title="storeName"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </van-sticky>
    <!--    返回导航栏-->



    <!--  商品-->
    <van-cell v-for="item in dishList">

      <!--                  商品卡片-->
      <van-card
        :price=item.price/100
        :desc=item.description
        :title=item.name
        :thumb="makeUrl(item.image)"

      >
        <template #tags>
          <van-tag plain type="danger">{{ item.categoryName }}</van-tag>
        </template>
        <!--                    按钮-->
        <template #footer>
          <van-button icon="plus" type="primary"
                      style="width: .1rem;height: .5rem;background-color: red;border: transparent"
                      @click="addCart(item)"/>
        </template>
      </van-card>
    </van-cell>
    <div style="height: 1rem;"></div>

    <!--                购物车pop-->
    <van-popup
      v-model:show="show"
      closeable
      close-icon-position="top-right"
      position="bottom"
      :style="{ height: '65%' }"
    >
<!--      地址-->
      <div @click="onEdit">
        <van-row class="addr">
          <van-col span="22" class="address">
            <div>
              联系人：<span>{{defaultAddress.consignee}}</span>
            </div>
            <div>
              电话：<span>{{defaultAddress.phone}}</span>
            </div>
            <div>
              地址：<span>{{defaultAddress.address}}</span>
            </div>
          </van-col>
          <van-col span="2" class="arrow"><van-icon name="arrow" size="19"/></van-col>
        </van-row>
      </div>
      <!--                  购物车内容-->
      <van-card
        v-for="cart in cartList"
        :price=cart.amount*cart.number/100.00
        :title=cart.name
        :thumb="makeUrl(cart.image)"
        style="padding-top: 1rem;height: 3rem;"
      >
        <template #footer>
          <!--                      进步器-->
          <van-stepper v-model="cart.number" min="" @change="updateCart(cart)"/>
        </template>

      </van-card>
      <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit">
        <!--                  购物车-->
        <van-icon name="shopping-cart-o" size=".5rem"
                  :badge="cartNum"
                  color="#ee0a24"
                  style="margin-right: 1rem;float: right"
                  @click="showPopup"/>
      </van-submit-bar>
      <!--                  留白-->
      <div style="height: 1rem;"></div>
    </van-popup>

    <!--                吸底-->
    <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit">
      <van-icon name="shopping-cart-o" size=".5rem"
                :badge="cartNum"
                color="#ee0a24"
                style="margin-right: 1rem"
                @click="showPopup"/>
    </van-submit-bar>
  </div>
</template>
<script>
export default {
  name: "store",
  data() {
    return {
      sidebar_active: '',
      tab_active: '',
      queryVo: {
        currentPage: 1,
        pageSize: 100,
        storeId: -1,
        name: ''
      },
      dishList: [],
      loading: false,
      finished: false,
      refreshing: false,
      totalPrice: 0,
      value: 0,
      storeName: '',
      cartNum: 0,
      cartList: [],
      show: false,
      orderId:0
    }
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.dishList = [];
          this.refreshing = false;
        }
        let newList = []
        newList = this.nextPage();
        this.dishList = this.dishList.concat(newList)
        console.log("dishList", this.dishList)
        this.loading = false;
        console.log("newList", newList)
        if (!newList) {
          this.finished = true;
        }
        console.log(this.dishList)
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    nextPage() {
      let _this = this
      _this.queryVo.currentPage += 1
      this.$axios.post("/dish/queryAll", _this.queryVo).then(resp => {
        console.log("nextPage", resp.data.data.pageInfo.list)
        return resp.data.data.pageInfo.list
      })
    },
    //立即支付
    onSubmit() {
      //如果没有选购，不调用支付
      if (this.totalPrice==0){
        return
      }
      let _this = this
      console.log("cartList",this.cartList)
      this.$toast.success("提交成功")
      this.$axios.post("/order/submit",this.cartList).then(resp=>{
        _this.orderId = resp.data.data.orderId
        console.log("获取到的orderId",_this.orderId)
        //更新购物车
        _this.queryCart()
        console.log(`http://localhost:8081/yum/alipay/pay?traceNo=${_this.orderId}&totalAmount=${_this.totalPrice/100}&subject=yummy`)
        window.open(`http://localhost:8081/yum/alipay/pay?traceNo=${resp.data.data.orderId}&totalAmount=${_this.totalPrice/100}&subject=yummy`)
      })
    },
    jumpToDetail(id) {
      console.log(id)
      this.$router.push("/dish/" + id)
    },
    addCart(item) {
      console.log("添加菜品", item)
      let _this = this
      this.$axios.post("/shoppingCart/add", item).then(resp => {
        console.log(resp)
        if (resp.data.result) {
          _this.$toast.success(resp.data.message)
          _this.queryCart()
        }
      })

    },
    queryCart() {
      let _this = this
      this.$axios.get("/shoppingCart/queryAll/" + _this.queryVo.storeId).then(resp => {
        console.log(resp)
        if (resp.data.result) {
          _this.cartList = resp.data.data.carts
        }
        _this.refreshCart(_this)
      })
    },
    showPopup() {
      this.show = !this.show
    },
    minus() {
      console.log("111111")
    },
    updateCart(cart) {
      console.log(cart)
      let _this = this
      this.$axios.post("/shoppingCart/update", cart).then(resp => {
        console.log(resp)
        if (resp.data.result) {
          _this.cartList = resp.data.data.carts
        }
        this.refreshCart(_this)
      })
    },
    refreshCart(_this) {
      let tempNum = 0
      let tempTotal = 0
      let c

      console.log("cartList-refreshCart", _this.cartList)
      for (c in _this.cartList) {

        console.log(tempNum, _this.cartList[c].number)
        tempNum = parseInt(_this.cartList[c].number) + parseInt(tempNum)
        tempTotal = _this.cartList[c].number*_this.cartList[c].amount+tempTotal

      }
      _this.cartNum = tempNum
      _this.totalPrice = tempTotal
    },
    queryAddress(){
      let _this = this
      this.$axios.get("/address/queryAddress").then(resp => {
        console.log(resp)
        if (resp.data.result) {
          _this.addressList = resp.data.data.addressList
          console.log(resp.data.data.addressList)
          let address
          for (address of _this.addressList){
            console.log(address)
            if (address.isDefault==1){
              _this.defaultAddress = address
              _this.defaultAddress.address = address.provinceName+address.cityName+address.districtName+address.detail
              _this.hasAddress = true
            }
          }
        }
      })
    },
    onEdit(){
      alert("跳转地址编辑页面")
    },
    makeUrl(img){
      return "http://81.68.175.78/img/"+img
    }
  },
  created() {
    console.log("storeId", this.$route.params.id)
    let _this = this
    let storeId = this.$route.params.id
    this.queryVo.storeId = storeId
    this.storeName = this.$route.params.storeName

    //
    this.$axios.post("/dish/queryAll", _this.queryVo).then(resp => {
      console.log(resp)
      _this.dishList = resp.data.data.pageInfo.list
    })

    this.queryCart()
    this.queryAddress()
  }
}
</script>

<style scoped>
.popCart{
  position: absolute;
  top: 3rem;
  height: 50%;
  width: 100%;
  background-color: red;
}

.hide{
  visibility: hidden;
}
.show{
  visibility: visible;
}
.addr{
  padding: .3rem;
  color: #646566;
}
.address{
  font-size: .2rem;
}
.arrow{
  line-height: 1rem;
}

.address div{
  margin-bottom: .2rem;
}
</style>
